import React from 'react';

const SliderWrap = props => (
  <div
    className={`sliderWrap${props.sliderShow ? ' __active' : ''}`}
    onClick={event => props.handleSliderWrap(event, false)}
  >
    <div className="wrap">
      {/* 用户头像 开始*/}
      <div className="wrap__header">
        <figure className="wrap__header__user">
          <div className="wrap__header__user__avatar" />
          <figcaption className="wrap__header__user__text">user</figcaption>
        </figure>
        <p className="wrap__header__cate"><span>分组</span></p>
      </div>
      {/* 用户头像 结束*/}

      {/* 列表筛选 开始*/}
      <ul className="wrap__list">
        {
          SliderWrap.filters.map(item => (
            <li
              className={`wrap__list__item${props.activeCate === item.type ? ' __active' : ''}`}
              key={item.type}
              onClick={(event) => {
                props.handleActiveType(item.type);
                props.handleFilter(item.type);
                props.handleSliderWrap(event, false);
              }}
            >
              {
                item.type === 0 ? (
                  <span className="wrap__list__icon">
                    <i className="icon__tips" />
                    <i className="icon__tips" />
                    <i className="icon__tips" />
                  </span>
                ) : (
                  <span className="wrap__list__icon">
                    <i className={`icon__tip${SliderWrap.styles[item.type]}`} />
                  </span>
                )
              }
              <div className="wrap__list__content">
                {item.text}
              </div>
            </li>
          ))
        }
      </ul>
      {/* 列表筛选 结束*/}
    </div>
  </div>
);

SliderWrap.filters = [
  { type: 0, text: '全部' },
  { type: 1, text: '生活' },
  { type: 2, text: '工作' },
  { type: 3, text: '加密' },
];
SliderWrap.styles = {
  1: ' __theme',
  2: ' __blue',
  3: ' __red',
};
export default SliderWrap;
